<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { Button, Card, Col, DatePicker, Row, Select } from 'ant-design-vue';

// 报表类型
const reportTypes = [
  { label: '收入报表', value: 'income' },
  { label: '入住率报表', value: 'occupancy' },
  { label: '费用统计报表', value: 'fees' },
  { label: '维修统计报表', value: 'maintenance' },
];

// 响应式数据
const selectedReportType = ref('income');
const dateRange = ref([]);
const loading = ref(false);

// 模拟数据
const reportData = ref({
  income: {
    totalRevenue: 125_000,
    monthlyGrowth: 12.5,
    topRooms: [
      { roomNumber: '101', revenue: 8500 },
      { roomNumber: '102', revenue: 8200 },
      { roomNumber: '103', revenue: 7800 },
    ],
  },
  occupancy: {
    averageRate: 85.6,
    peakMonth: '7月',
    lowMonth: '2月',
    roomTypes: [
      { type: '标准间', rate: 90.2 },
      { type: '豪华间', rate: 78.5 },
      { type: '套房', rate: 65.3 },
    ],
  },
});

const handleGenerateReport = () => {
  loading.value = true;
  // 模拟API调用
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};

onMounted(() => {
  console.log('报表分析页面已加载');
});
</script>

<template>
  <div class="reports-page">
    <Card title="报表分析" :bordered="false">
      <!-- 筛选条件 -->
      <div class="filter-section">
        <Row :gutter="16" align="middle">
          <Col :span="6">
            <div class="filter-item">
              <label>报表类型：</label>
              <Select
                v-model="selectedReportType"
                :options="reportTypes"
                style="width: 100%"
              />
            </div>
          </Col>
          <Col :span="8">
            <div class="filter-item">
              <label>时间范围：</label>
              <DatePicker.RangePicker v-model="dateRange" style="width: 100%" />
            </div>
          </Col>
          <Col :span="4">
            <Button
              type="primary"
              :loading="loading"
              @click="handleGenerateReport"
            >
              生成报表
            </Button>
          </Col>
        </Row>
      </div>

      <!-- 报表内容 -->
      <div class="report-content">
        <!-- 收入报表 -->
        <div v-if="selectedReportType === 'income'" class="income-report">
          <Row :gutter="16">
            <Col :span="8">
              <Card title="总收入" :bordered="false">
                <div class="stat-value">
                  ¥{{ reportData.income.totalRevenue.toLocaleString() }}
                </div>
                <div class="stat-trend">
                  同比增长 {{ reportData.income.monthlyGrowth }}%
                </div>
              </Card>
            </Col>
            <Col :span="16">
              <Card title="收入排行" :bordered="false">
                <div class="ranking-list">
                  <div
                    v-for="(room, index) in reportData.income.topRooms"
                    :key="room.roomNumber"
                    class="ranking-item"
                  >
                    <span class="rank">{{ index + 1 }}</span>
                    <span class="room">{{ room.roomNumber }}</span>
                    <span class="revenue"
                      >¥{{ room.revenue.toLocaleString() }}</span
                    >
                  </div>
                </div>
              </Card>
            </Col>
          </Row>
        </div>

        <!-- 入住率报表 -->
        <div v-if="selectedReportType === 'occupancy'" class="occupancy-report">
          <Row :gutter="16">
            <Col :span="8">
              <Card title="平均入住率" :bordered="false">
                <div class="stat-value">
                  {{ reportData.occupancy.averageRate }}%
                </div>
                <div class="stat-info">
                  旺季：{{ reportData.occupancy.peakMonth }}<br />
                  淡季：{{ reportData.occupancy.lowMonth }}
                </div>
              </Card>
            </Col>
            <Col :span="16">
              <Card title="房型入住率" :bordered="false">
                <div class="room-type-stats">
                  <div
                    v-for="type in reportData.occupancy.roomTypes"
                    :key="type.type"
                    class="room-type-item"
                  >
                    <span class="type-name">{{ type.type }}</span>
                    <div class="progress-bar">
                      <div
                        class="progress-fill"
                        :style="{ width: `${type.rate}%` }"
                      ></div>
                    </div>
                    <span class="rate-value">{{ type.rate }}%</span>
                  </div>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </div>
    </Card>
  </div>
</template>

<style scoped>
.reports-page {
  padding: 16px;
}

.filter-section {
  padding: 16px;
  margin-bottom: 24px;
  background: #f5f5f5;
  border-radius: 8px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-item label {
  font-weight: 500;
  color: #333;
}

.report-content {
  margin-top: 24px;
}

.stat-value {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
}

.stat-trend {
  font-size: 14px;
  color: #52c41a;
}

.stat-info {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background: #1890ff;
  border-radius: 50%;
}

.room {
  flex: 1;
  font-weight: 500;
}

.revenue {
  font-weight: bold;
  color: #52c41a;
}

.room-type-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.room-type-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.type-name {
  width: 80px;
  font-weight: 500;
}

.progress-bar {
  flex: 1;
  height: 8px;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 4px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1890ff, #52c41a);
  transition: width 0.3s ease;
}

.rate-value {
  width: 50px;
  font-weight: bold;
  color: #1890ff;
  text-align: right;
}
</style>
